<template>
  <div>
    <el-main :style="{ '--zoom': zoom }">
      <el-row :gutter="10" style="margin-left: 0px; margin-right: 0px">
       
        <el-col :span="10" :offset="6">
          <el-row class="company_text">
            <el-col>
              <el-card shadow="never">
                <el-row>
                  <el-col>
                    <el-row>
                      <el-col :span="12" class="company_title">
                        {{ companyInfo.company }}
                        <!-- <el-button size="mini" type="primary" round @click="table = true"
                          >企业信息</el-button
                        > -->
                      </el-col>
                      <el-col :span="4" :offset="8">
                        <el-button size="mini" type="primary" round @click="companyDetails(companyInfo.id)">管理</el-button>
                      </el-col>
                    </el-row>
                  </el-col>

                  <el-descriptions title="" :column="4" :labelStyle="labelStyle" :contentStyle="contentStyle">
                    <el-descriptions-item label="邮箱">{{
                      companyInfo.email
                    }}</el-descriptions-item>

                    <el-descriptions-item label="联系人">
                      <div class="flex" style="position: relative">
                        <div>
                          {{ companyInfo.username }}
                        </div>
                        <el-popover trigger="click" v-if="companyInfo.business_card">
                          <el-image style="width: 400px; height: 250px" :src="companyInfo.business_card"
                            fit="contain"></el-image>
                          <i slot="reference" class="iconfont icon-1-yonghuguanli"></i>
                        </el-popover>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="联系方式">{{
                      companyInfo.mobile
                    }}</el-descriptions-item>
                    <el-descriptions-item label="所属区域">{{
                      companyInfo.street_name
                    }}</el-descriptions-item>

                    <el-descriptions-item label="是否支持走访" :span="4">
                      <div style="margin-left: 10px;">
                        <el-radio-group v-model="visitRadio" @input="RadioClick(1,$event)">
                          <el-radio :label="1">支持走访</el-radio>
                          <el-radio :label="0">拒绝走访</el-radio>
                        </el-radio-group>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="公司类型" :span="4">
                      <div style="margin-left: 10px;">
                        <el-radio-group v-model="companyRadio" @input="RadioClick(2,$event)">
                          <el-radio :label="1">企业</el-radio>
                          <el-radio :label="2">机构</el-radio>
                        </el-radio-group>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="荣誉标签" :span="4">
                      <div class="tagItem" v-if="companyInfo.honor_label">
                        <div v-for="(item, index) in companyInfo.honor_label.one">
                          <el-tag class="b_bule">{{ item.honor.name }}</el-tag>
                        </div>
                        <div v-for="(item, index) in companyInfo.honor_label.three">
                          <el-tag class="b_bule">{{ item.name }}</el-tag>
                        </div>
                        <div v-for="(item, index) in companyInfo.honor_label.two">
                          <el-tag class="b_bule">{{ item.name }}</el-tag>
                        </div>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="企业标签" :span="4">
                      <div>
                        <el-tag @click="management(item.id)" class=" pointer b_bule b_color" v-for="(item, index) in companyInfo.honor_label.label"
                          :key="item.name">{{ item.name }}</el-tag>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="需求标签" :span="4">
                      <div v-if="companyInfo.honor_label.ttt_label">
                        <el-tag class="b_bule b_red2" v-for="(item, index) in companyInfo.honor_label.ttt_label.true_get"
                          :key="item.id + '已解决'">{{ item.name }}</el-tag>
                        <el-tag class="b_bule b_red" v-for="(item, index) in companyInfo.honor_label.ttt_label.false_get"
                          :key="item.id + '未解决'">{{ item.name }}</el-tag>
                      </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="贯标情况" :span="4">
                      <el-tag class="b_bule" v-if="companyInfo.label_type == 1">未做贯标</el-tag>
                      <el-tag class="b_bule" v-if="companyInfo.label_type == 2">已做贯标({{ companyInfo.endDate }})</el-tag>
                      <el-tag class="b_bule" v-if="companyInfo.label_type == 3">贯标到期({{ companyInfo.endDate }})</el-tag>
                    </el-descriptions-item>
                    
                  </el-descriptions>
                </el-row>
              </el-card>
            </el-col>
          </el-row>

          <drawerVisit @update="update" v-if="company_id" :status_agent="companyInfo.status_agent"
            :status_update="companyInfo.status_update" :table="table" :company_id="company_id" :form_admin="form_admin">
          </drawerVisit>
        </el-col>
        <!-- <el-col :span="10">
          <drawerVisit @update="update" v-if="company_id" :status_agent="companyInfo.status_agent"
            :status_update="companyInfo.status_update" :table="table" :company_id="company_id" :form_admin="form_admin">
          </drawerVisit>
        </el-col> -->
      </el-row>

      <el-drawer title="企业信息" :visible.sync="table" direction="rtl" size="45%" :before-close="close">
        <drawerVisit @update="update" :status_agent="companyInfo.status_agent" :status_update="companyInfo.status_update"
          :table="table" :company_id="company_id" :form_admin="form_admin"></drawerVisit>
      </el-drawer>

      <el-dialog title="是否删除此条记录" :visible.sync="dialogVisible" width="20%" center>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="Delete">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>

<script>
import {
  companyAllInfo,
  demandDel,
  visitDel,
  companyInfo,
  companySwitch
} from "@/api/configApi"
import { VUE_APP_BASE_API } from "@/config";
import drawerVisit from "./components/drawerVisit.vue";

export default {
  data() {
    return {
      form_admin: {
        company_name: "",
      },
      deleteId: "",
      visitRadio: '',
      companyRadio: '',
      street_name: "",
      dialogVisible: false,
      status_agent: 1,
      status_update: 0,
      table: false,
      company_id: "",
      datalist: {},
      company_name: this.$route.query.company_name ? this.$route.query.company_name : "",
      id: this.$route.query.id ? this.$route.query.id : "",
      user_id: this.$store.state.user.id,
      solveSuccess: [],
      solveNot: [],
      companyInfo: {},
      Visitdate: [],
      Scrolltop: [],
      page: 1,
      limit: 99,
      count: 0,
      Visitdatechoice: "",
      form_add: {
        desc1: "",
        desc2: "",
        Visitdate: "",
        name: "",
        tate: "",
      },
      d_add: false,
      dialogImageUrl: "",
      d_img: false,
      disabled: false,
      labelList: [],
      activeName: "basic",
      form: {
        name: "",
        contacts: "",
        Visitpeople: [],
        Email: "",
        phone: "",
        Visitdate1: "",
        Visitdate2: "",
        record: "",
        demand1: "",
      },
      fileList: [],
      labelStyle: {
        fontSize: "14px",
        fontWeight: "bold",
        margin: "5px 0px 0 0",
      },
      zoom: 1,
      contentStyle: {
        fontSize: "14px",
        // fontWeight: 'bold'
        margin: "5px 0px 0 0",
      },
      have_demand: 1,
    };
  },
  components: { drawerVisit },
  mounted() {

    if (!this.isNumeric(this.$route.query.company_id)) {
      this.company_id = this.$route.query.company_id
    } else {
      this.company_id = Number(this.$route.query.company_id);
    }
    //mounted监听处理
    window.addEventListener("scroll", this.scrollLoadMore);
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;

    companyInfo({
      company_id: this.company_id,
    }).then((res) => {
      this.companyInfo = res.res;
      this.companyInfo.honor_label = res.label

      this.companyRadio = this.companyInfo.company_type
      this.visitRadio = this.companyInfo.is_support_visit
    });

    this.companyAllInfo();
  },
  destroy() {
    // 移除监听器
    window.removeEventListener("scroll", this.scrollLoadMore);
  },
  methods: {
    management(id){
      this.$router.push({
        path: "/CompanyManagement",
        query: {
          label: id,
        },
      });
    },
    RadioClick(type,status) {
      companySwitch({
        type:type,
        status: status,
        company_id: this.company_id
      })
    },
    isNumeric(str) {
      return /^\d+$/.test(str);
    },
    companyDetails(id) {
      this.$router.push({
        path: "/companyDetails",
        query: {
          company_id: id,
        },
      });
    },
    companyAllInfo() {
      companyAllInfo({
        company_id: this.company_id,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.Visitdate = res.list;
        this.Visitdate.map((res, index) => {
          if (res.end_arr.images) {
            let imgs = [];
            res.end_arr.images_arr.map((res_1) => {
              imgs.push({
                url: res_1,
              });
            });
            this.Visitdate[index].end_arr.images = imgs;
          }
        });
        this.Visitdatechoice = res.list.length ? res.list[0].create_time : "";
      });
    },
    createWord(data) {
      // window.open(`${VUE_APP_BASE_API}/v1/create/word?visit_id=${data.end_arr.id}`);
    },
    cancel() {
      this.deleteId = "";
      this.have_demand = 1;
      this.dialogVisible = false;
    },
    DeleteBtn(row) {
      this.have_demand = row.have_demand;
      this.deleteId = row.end_arr.id;
      this.dialogVisible = true;
    },
    Delete() {
      if (this.have_demand != 2) {
        visitDel({ visit_id: this.deleteId }).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.companyAllInfo();
          this.cancel();
        });
      } else {
        demandDel({
          demand_id: this.deleteId,
        }).then((res) => {
          this.companyAllInfo();
          this.cancel();
        });
      }
    },
    update() { },
    close() {
      this.table = false;
    },
    modifyInfo(item) {
      if (item.have_demand != 2) {
        this.$router.push({
          path: "/workVisit",
          query: {
            id: item.end_arr.id,
          },
        });
      } else {
        this.$router.push({
          path: "/workVisit",
          query: {
            id: item.end_arr.id,
            have_visit: 2,
          },
        });
      }
    },
    addEnterprisevisit() {
      this.$router.push({
        path: "/addWaitvisit",
        query: {
          company_name: this.companyInfo.company,
          company_id: this.companyInfo.id,
        },
      });
    },
    handleClick() { },
    onSubmit() { },
    addprogramme() {
      this.d_add = true;
    },
    removeProgramme(file) {
      let b_dom = document.getElementById("b_upload").getElementsByClassName("el-upload");
      // b_dom[0].style.display = 'inline-block'
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    handlePreview(file, fileList) {
      window.open(file.url);
    },
    upload_success(file, fileList) { },
    beforeRemove() {
      return false;
    },
    choice(item) {
      this.Visitdatechoice = item;
      let top =
        this.$refs[item][0].$el.getBoundingClientRect().top + window.scrollY - 100;
      // 滚动到元素位置
      window.scrollTo({
        top: top,
        behavior: "smooth", // 平滑滚动
      });
    },
    choiceScrolltop() {
      this.Visitdate.forEach((item) => {
        this.$nextTick(() => {
          this.Scrolltop.push(this.$refs[item][0].$el.getBoundingClientRect().top - 100);
        });
      });
    },

    scrollLoadMore() {
      //页面滚动位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.Visitdate.forEach((item, index) => {
        let height = this.Scrolltop[index]; //滚动范围
        if (index == 0) {
          if (scrollTop < height) {
            this.Visitdatechoice = item;
          }
        } else {
          if (scrollTop <= height && scrollTop > this.Scrolltop[index - 1]) {
            this.Visitdatechoice = item;
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .is-disabled {
  input {
    color: #606266 !important;
  }

  .el-textarea__inner {
    color: #606266 !important;
  }
}

.b_color {
  color: #109421 !important;
  background-color: #c2f9c9 !important;
}

::v-deep .el-form-item .el-form-item__label {
  font-size: 14px;
  width: 80px;
  font-weight: initial;
  text-align: initial;
}

.el-main {
  zoom: var(--zoom);
}

::v-deep .el-form-item__content .upload-demo {
  .el-upload {
    display: none;
  }
}

::v-deep .el-upload--picture-card {
  display: none;
}

::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

::v-deep .el-form-item .el-form-item__content .el-input__inner {
  height: 38px;
}

::v-deep .Visitdate .el-form-item__content .el-col {
  padding: 0 !important;
}

::v-deep .el-form-item .el-form-item {
  margin-bottom: 22px;
}

::v-deep .qw_date .el-form-item__label {
  // width: 100px !important;
  // margin-left: 120px;
}

::v-deep .qw_date .el-form-item .el-form-item__content .el-date-editor {
  width: 100% !important;
  padding-right: 10px;
}

::v-deep .qw_date .el-form-item__content .el-date-editor {
  // width: 150px;
}

::v-deep .v_tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
  padding: 0 33px;
}

::v-deep .card_v .el-card__body {
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 20px;
  }
}

::v-deep .el-collapse {
  border-top: none !important;
}

.tagItem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.Navigation {
  //固定页面位置
  position: fixed;
  width: 15%;
}

.icon-1-yonghuguanli {
  color: #0059f4;
  margin-left: 5px;
  font-size: 22px;
  position: absolute;
  top: -6px;
}

.date_box {
  text-align: center;

  div {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  .active_data_l {
    color: #387dff;
  }

  .data_border_b {
    cursor: pointer;
    border-bottom: 1px solid #e8ecef;
  }

  .data_border_b:nth-last-child(2) {
    border-bottom: none;
    margin-bottom: 40px;
  }

  .date_button_t {
    button {
      width: 100%;
    }
  }

  .datetitle {
    background-color: #f5f6f9;
    margin-bottom: 10px;
  }
}

.qw_but {
  padding: 0 80px;
}

.d_boreder {
  border-bottom: 5px solid #eeeff2;
  margin-bottom: 20px;
}

::v-deep .descriptions_1 .el-descriptions__body .el-descriptions__table tbody:nth-child(1) {
  tr:nth-child(1) {
    color: #808596;
  }

  tr:nth-child(2) {
    color: #4682d7;
  }
}

.company_text {
  .company_title {
    font-size: 22px;
    font-weight: bolder;
  }

  button {
    font-size: 14px;
    background: #387dff;
    padding: 7px 40px;
  }

  .success_box {
    margin: 0px 0 25px 0;

    .el-col-2 {
      height: 26px;
      line-height: 26px;
    }
  }

  .not_box {
    .el-col-2 {
      height: 26px;
      line-height: 26px;
    }
  }
}

.date_category {
  font-size: 14px;
  color: #387dff;
  margin: 15px 0;
}

.date_category .updateInfo::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 30px;
  background-color: #387dff;
  display: inline-block;
  margin: 2px 5px;
}

// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(1),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(1){
//   border-right: 1px solid black;
// }
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr th:nth-child(2),
// ::v-deep .descriptions_2 .el-descriptions__body .el-descriptions__table tbody tr td:nth-child(2){
//   padding: 0 10px;
// }
::v-deep .el-descriptions__body .el-descriptions__table tbody tr:nth-child(1) th {
  padding-bottom: 0;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377ff;
  background-color: #ebf2ff;
  border: 1px solid #387dff;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: #f4f5f7;
  padding: 0;
}

.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.bo_primary {
  position: absolute;
  top: 35px;
  left: -15px;
}

.form_top {
  margin-bottom: 15px;
}

.bo_primary_i {
  margin-left: 5px;
  background-color: #999999;
  color: #ffffff;
  border: none;
  padding: 7px 40px;
}

.bo_primary_i2 {
  padding: 7px 40px;
}

.preservation_b {
  margin: 20px 0;
  border-radius: 30px;
  background-color: #387dff;
  color: #fff;
  padding: 5px 35px;
}

::v-deep .upload_box .el-form-item__label {
  padding: 0;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}

::v-deep .el-dialog {
  border-radius: 10px;
  margin-top: 22vh !important;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
